<template>
  <div>
    <Header :left="true" leftText="返回" title="实验室校验数据" />
    <div>
      <div style="margin-top: 10px; margin-bottom: 10px">
        <van-button
          type="primary"
          class="buttongroup1"
          @click="hideSearch"
          color="#138087"
          >查询条件</van-button
        >
      </div>
      <div style="height: 15erm" v-if="showeSearch">
        <Form :style="autoHeight">
          <van-field
            label="创建时间"
            class="formstyle"
            placeholder="请选择创建时间"
            is-link
            :value="form.CreateTime"
            @click="showdate = true"
          />
          <van-calendar
            color="#1989fa"
            v-model="showdate"
            @confirm="onConfirm"
            :min-date="minDate"
          />
          <van-field
            class="formstyle"
            v-model="form.ProductName"
            name="产品名称"
            label="产品名称"
            placeholder="输入产品名称"
          />
          <van-field
            class="formstyle"
            v-model="form.CustomName"
            name="客户名称"
            label="客户名称"
            placeholder="输入客户名称"
          />
          <!-- 检验项目下拉框 -->
          <van-field
            readonly
            class="formstyle"
            name="picker"
            :value="inspectionItems"
            label="检验项目"
            placeholder="点击选择检验项目"
            @click="showPickerinspectionItems = true"
          />
          <van-popup v-model="showPickerinspectionItems" position="bottom">
            <van-picker
              show-toolbar
              :columns="columnsinspectionItems"
              @confirm="onConfirminspectionItems"
              @cancel="showPickerinspectionItems = false"
            >
              <template #option="option">
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <div>{{ option.inspectionItems }}</div>
                </div>
              </template>
            </van-picker>
          </van-popup>
        </Form>
        <div style="margin-top: 10px; margin-bottom: 10px">
          <van-button
            type="primary"
            class="buttongroup"
            @click="getQualityCheckRecordItemStrcList"
            color="#138087"
            >查询</van-button
          >
        </div>
      </div>

      <div class="textScroll" id="textScroll">
        <!-- 循环数据开始 -->
        <div v-for="item in itemsOne" :key="item.Id" style="position: relative">
          <div style="width: 100%; background-color: #f3f4f8; height: 5px">
            <span></span>
          </div>
          <div class="divStyle">
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>客户名称:</b></van-col>
              <van-col span="20">{{ item.CustomName }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>产品名称:</b></van-col>
              <van-col span="20">{{ item.ProductName }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>创建时间:</b></van-col>
              <van-col span="18">{{ item.CreateTime }}</van-col>
              <van-col span="2">
                <van-button
                  style="
                    width: 85px;
                    height: 40px;
                    font-size: 12px;
                    position: absolute;
                    left: 80%;
                  "
                  type="primary"
                  text="查看详情"
                  @click.stop="seeCheckedDetail(item)"
                />
              </van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>检验项目名称:</b></van-col>
              <van-col span="20">{{ item.InspectionItem }}</van-col>
            </van-row>
          </div>
          <div>
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  tab,
  tabs,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
  name: "laboratoryTestData",
  components: {
    tab,
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },

  data() {
    return {
      columnsinspectionItems: [
        { inspectionItems: "单重" },
        { inspectionItems: "颈高" },
        { inspectionItems: "螺纹大径" },
        { inspectionItems: "卡环外径" },
        { inspectionItems: "瓶口内径" },
      ],
      showPickerinspectionItems: false,
      columnspline: [],
      minDate: new Date(2023, 0, 1),
      showdate: false,
      showPickerpline: false,
      itemsOne: [],
      form: {},
      showeSearch: false,
      RecordValueList: [],
      query: {
        CustomName: "",
        ProductName: "",
        InspectionItem: "",
      },
    };
  },

  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.getQualityCheckRecordItemStrcList();
  },
  async mounted() {},

  methods: {
    async seeCheckedDetail(val) {
      let _this = this;
      _this.RecordValueList = [];
      await _this.getQualityCheckRecordItem(val);
      if (_this.RecordValueList.length == 0) {
        Toast.fail("未查询到数据!");
      } else {
        _this.$ac.openWin({
          name: "laboratoryTestDataItem01",
          url: "./quality-laboratoryTestDataItem01.html",
          pageParam: {
            RecordValueList: _this.RecordValueList,
          },
        });
      }
    },

    async getQualityCheckRecordItem(item) {
      var _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
            "/QualityCheckRecordItem/GetListJsonByParentId?ColIndex=" +
            item.ColomnIndex +
            "&SheetItemID=PETBJ14-05"
        );
        if (res.HttpCode === "200") {
          Toast.clear();
          if (res.Total == 0) {
            Toast.fail("未查询到相关数据");
          } else {
            let QualityCheckRecordItemList = res.Data;
            QualityCheckRecordItemList.forEach(function (item, index, self) {
              _this.RecordValueList[index] = item.RecordValue;
            });
          }
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },


    onConfirm(date) {
      this.showdate = false;
      this.form.CreateTime = this.formatDate(date);
    },
    onConfirminspectionItems(value, index) {
      this.inspectionItems = this.columnsinspectionItems[index].inspectionItems;
      this.form.valuepline = this.columnsinspectionItems[index].inspectionItems;
      this.showPickerinspectionItems = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    async getQualityCheckRecordItemStrcList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
            "/QualityCheckRecordItemStrc/GetList?CustomName=" +
            _this.query.CustomName +
            "&ProductName=" +
            _this.query.ProductName +
            "&InspectionItem=" +
            _this.query.InspectionItem
        );

        if (res.Total === 0) {
          Toast.clear();
        } else {
          Toast.clear();
          _this.itemsOne = res.Data;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    async hideSearch() {
      if (this.showeSearch == false) {
        document.getElementById("textScroll").style.top = "40%";
        this.showeSearch = true;
      } else {
        this.showeSearch = false;
        document.getElementById("textScroll").style.top = "16%";
      }
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  width: 30%;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.buttongroup1 {
  float: left;
  width: 30%;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 16%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  /* border: 1px solid #dcdcdc; */
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 0px;
}
</style>
